<template>
	<scroll-view scroll-y="true" class="container">
		<block v-if="config.is_partner_enable">
			<block v-if="applyInfo.level_isexist">
				<block v-if="applyInfo.agent_type == 2">
					<!-- 未申请 -->
					<view class="apply-steps">
						<view class="step first is-in">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">提交股东申请</text>
						</view>
						<view class="step">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">等待审核</text>
						</view>
						<view class="step last">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">申请成功</text>
						</view>
					</view>
					<view class="apply-wrap">
						<view class="tit"><text>股东协议</text></view>
						<view class="cont">
							<text>在成为股东期间，所有股东应该根据总店的政策和决意走。</text>
						</view>
					</view>		
					<view class="apply-wrap">
						<view class="tit"><text>申请条件</text></view>
						<view class="cont">
							<view class="condition">
								<text>条件一：成为本店推广员</text>
								<text class="ns-text-color status">已完成</text>
							</view>
							<view class="condition">
								<text>条件二：最低消费满<text class="ns-text-color">￥{{applyInfo.shop_sale_money}}</text>元，已消费<text class="ns-text-color">￥{{userConsume}}</text></text>
								<text class="status" :class="{'ns-text-color': isMeet}">{{isMeet ? '已完成' : '未完成'}}</text>
							</view>
						</view>
					</view>
					<button type="primary" @click="applayPartner" v-if="isMeet">立即申请</button>
				</block>
				<block v-else-if="applyInfo.agent_type == 0 || applyInfo.agent_type == -1">
					<!-- 审核中 审核未通过-->
					<view class="apply-steps">
						<view class="step first is-process">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">提交股东申请</text>
						</view>
						<view class="step is-in">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">等待审核</text>
						</view>
						<view class="step last">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">申请成功</text>
						</view>
					</view>
					<view class="apply-wrap">
						<view class="not-opened">
							<view class="img"></view>
							<text class="ns-font-size-sm ns-text-color-gray" v-if="applyInfo.agent_type == 0">审核中请耐心等待</text>
							<text class="ns-font-size-sm ns-text-color-gray" v-if="applyInfo.agent_type == -1">申请未通过可<text class="ns-text-color" @click="againApply">重新申请</text></text>
						</view>
					</view>
				</block>
				<block v-else-if="applyInfo.agent_type == 1">
					<!-- 审核通过 -->
					<view class="apply-steps">
						<view class="step first is-process">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">提交股东申请</text>
						</view>
						<view class="step is-process">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">等待审核</text>
						</view>
						<view class="step last is-in">
							<view class="line"></view>
							<view class="point"></view>
							<text class="text">申请成功</text>
						</view>
					</view>
					<view class="apply-wrap">
						<view class="not-opened">
							<view class="img"></view>
							<text class="ns-font-size-sm ns-text-color-gray">申请已通过，您已成为股东</text>
						</view>
					</view>
					<navigator url="/distributionpages/index/index"><button type="primary">前往推广中心</button></navigator>
				</block>
			</block>
			<block v-else>
				<view class="not-opened">
					<view class="img"></view>
					<text class="ns-font-size-sm ns-text-color-gray">暂未设置股东等级，请联系管理人员。</text>
				</view>
			</block>
		</block>
		<block v-else>
			<view class="not-opened">
				<view class="img"></view>
				<text class="ns-font-size-sm ns-text-color-gray">股东功能暂未开启，请联系管理人员。</text>
			</view>
		</block>
		<ns-login ref="login" href="distribution"></ns-login>
	</scroll-view>
</template>

<script>
import http from 'common/js/http.js';
import nsLogin from 'components/ns-login/ns-login.vue';

export default {
	components: {
		nsLogin
	},
	data() {
		return {
			applyInfo: {
				level_isexist: false
			},
			config: {
				is_partner_enable: 0
			},
			userConsume: '0.00',
			isMeet: false,
			isSub: false
		};
	},
	methods: {
		/**
		 * 获取股东申请信息
		 */
		getApplyInfo(){
			this.sendRequest({
				url: 'System.Distribution.checkApplyPartner',
				success: res => {
					this.applyInfo = res.data;
					this.getUserConsume();
				}
			})
		},
		/**
		 * 获取店铺推广设置
		 */
		getConfig(){
			this.sendRequest({
				url: 'System.Distribution.shopConfig',
				success: res => {
					this.config = res.data;
				}
			})
		},
		/**
		 * 获取用户消费
		 */
		getUserConsume(){
			this.sendRequest({
				url: 'System.Distribution.userConsume',
				success: res => {
					this.userConsume = res.data;
					this.isMeet = this.userConsume >= this.applyInfo.shop_sale_money;
				}
			})
		},
		/**
		 * 申请股东
		 */
		applayPartner(){
			if (this.isSub) return;
			this.isSub = true;
			this.sendRequest({
				url: 'System.Distribution.applyPartner',
				success: res => {
					if(res.data > 0){
						this.$util.showToast({ title: '股东申请成功' });
						this.getApplyInfo();
					}else{
						this.isSub = false;
						this.$util.showToast({ title: '股东申请失败' });
					}
				}
			})
		},
		/**
		 * 重新申请
		 */
		againApply(){
			this.applyInfo.agent_type = 2;
		}
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;
		
		this.getApplyInfo();
		this.getConfig();
	},
	mixins: [http]
};
</script>

<style lang="scss">
.container {
	width: 100%;
	height: 100vh;
}
.apply-steps{
	width: 100%;
	display: flex;
	padding: 80rpx 0 40rpx 0;
	
	.step{
		flex: 1;
		text-align: center;
		position: relative;
		overflow: hidden;
		padding-top: 40rpx;
		
		.text {
			font-size: 24rpx;
			color: $ns-text-color-gray;
		}
		
		.line {
			position: absolute;
			height: 2rpx;
			background: $ns-bg-color-gray;
			width: 100%;
			top: 20rpx;
		}
		
		.point {
			position: absolute;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: $ns-bg-color-gray;
			top: 20rpx;
			left: 50%;
			transform: translateY(-50%);
		}
	}
	
	.first {
		.line,.point{
			left: 50%;
		}
	}
	
	.last {
		.line,.point{
			right: 50%;
		}
	}
	
	.is-process {
		.line {
			background: $base-color;
		}
		.point {
			background: $base-color;
		}
	}
	
	.is-in {
		.line {
			background: $base-color;
		}
		.point {
			background: #fff;
			border: 6rpx solid $base-color;
		}
	}
	
}
.apply-wrap{
	margin: 20rpx;
	border-radius: $ns-border-radius;
	background: #fff;
	padding: 0 20rpx;
	
	.tit {
		line-height: 70rpx;
		height: 70rpx;
		
		text{
			padding-left: 10rpx;
			border-left: 4rpx solid $base-color;
		}
	}
	
	.cont {
		padding: 0 0 20rpx 0;
		line-height: normal;
		
		.condition {
			position: relative;
			padding-right: 100rpx;
			
			.status{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		
		text{
			color: $ns-text-color-gray;
			font-size: $ns-font-size-sm;
			line-height: 1.3;
		}
	}
	
	.not-opened{
		margin: 0;
		padding: 40rpx 0;
		
		.img{
			margin-top: 0;
		}
	}
}
.not-opened {
	margin: 140rpx 40rpx 0 40rpx;
	text-align: center;
	
	.img {
		width: 220rpx;
		height: 220rpx;
		display: block;
		margin: 80rpx auto 0;
		background: url() no-repeat center;
		background-size: 220rpx;
	}
}
</style>
